<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>合同验收付款表</span></div>
    <div class="container">
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :xl="{ span: 14 }" :lg="{ span: 11 }">
            <a-button class="hte-btn add-btn" type="primary">导出</a-button>
            <a-button class="hte-btn del-btn">刷新</a-button>
          </a-col>
          <a-col :xl="{ span: 9 }" :lg="{ span: 13 }" class="input-ground">
            <a-input-group compact>
              <a-select default-value="状态">
                <a-select-option value="状态"> 合同状态 </a-select-option>
                <a-select-option value="合同名称"> 合同名称 </a-select-option>
              </a-select>
              <a-input-search v-model="valueSearch" @search="doSearch" placeholder="请按照关键字进行搜索" />
            </a-input-group>
            <a-button class="hte-btn del-btn" @click="visibleModel=true">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>
      <!-- <div class="floatNav">
        <div class="budget-detail">
          <span class="iconfont icon-reportReserve"></span>
          <a-badge count="22" :offset="[-11, -15]">
            <p>我的报工单</p>
          </a-badge>
        </div>
        <div class="budget-detail">
          <span class="iconfont icon-reportReserve"></span>
          <a-badge count="22" :offset="[-11, -15]">
            <p>验收付款单</p>
          </a-badge>
        </div>
      </div> -->
      <div class="content-list">
        <a-table
          :columns="reservationColumns"
          :data-source="reservationData"
          :pagination="pagination"
          :loading="tabLoading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          size="middle"
          @change="pageChange"
        >
          <span slot="taskTotal" slot-scope="text">
            <i :class="{ succfont: text > 3 }">{{ text }}</i>
          </span>
        </a-table>
      </div>
    </div>
    <a-back-top class="backtodom" />
    <a-modal
      v-model="visibleModel"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级搜索"
      @ok="callBackResult"
    >      
      <advanced-search :dataForm.sync="form"></advanced-search>
    </a-modal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'

export default {
  name: 'ContractPaymentList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    AdvancedSearch: () => import('@views/workReport/page/AdvancedSearch'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractPaymentList',
      },
      reservationColumns: [
        {
          title: '状态',
          dataIndex: 'taskTotal',
          width: '12%',
          align: 'center',
          scopedSlots: { customRender: 'taskTotal' },
        },
        {
          title: '申请流水号',
          dataIndex: 'teamName',
          width: '12%',
          align: 'center',
        },
        {
          title: '申请人/部门',
          dataIndex: 'completedTotal',
          width: '12%',
          align: 'center',
        },
        {
          title: '合同编号',
          dataIndex: 'incompletedTotal',
          width: '22%',
          align: 'center',
        },
        {
          title: '合同名称',
          dataIndex: 'delayTotal',
          width: '21%',
          align: 'center',
        },
        {
          title: '签订公司',
          dataIndex: 'advanceCompletedTotal',
          width: '21%',
          align: 'center',
        },
      ],
      reservationData: [],
      selectedRowKeys: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      valueSearch: '',
      visibleModel: false,
      form: {},
    }
  },
  mounted() {
    this.getConTaskListData()
  },
  methods: {
    /**
     * 查询
     */
    getConTaskListData() {
      this.tabLoading = true
      getAction('/projectWorkTask/list', {
        pageSize: this.currPageSize,
        pageNo: this.currPageIndex,
        status: 5,
        taskBuildType: '2',
        keyword: this.searchVal,
        taskType: 40,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.pagination.total = res.result.total
          res.result.records.forEach((item, index) => {
            item.key = index
          })
          this.reservationData = res.result.records
          this.tabLoading = false
        } else {
          this.$messageWorkReport.warning('数据加载失败:' + res.message)
          this.tabLoading = false
        }
      })
    },
    pageChange() {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      this.getConTaskListData()
    },
    doSearch() {
      this.currPageIndex = 0
      this.getConTaskListData()
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * 高级搜索 
     */
    callBackResult(event){
      console.log(this.form)
    }
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {    
    background-image: url(../~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
      .succfont {
        color: @font-color-succ;
      }
    }
  }
}
</style>